<template>
	<view class="diy-notice" :style="{ background: value.backgroundColor ,'padding-top':value.padding +'px','padding-bottom':value.padding +'px',margin:'0 '+value.marginLeftRight+'px'}">
		<view class="padding-x-md padding-y-xs">
			<view class="flex flex-row padding-lr-sm radius" style="background-color: #F7F7F7;height: 70rpx;">
				<image style="width: 93rpx;height: 84rpx;margin-top: -20rpx;" src="/static/gg_ico.png" mode=""></image>
				<view class="flex-1">
					<swiper class="flex" style="" @change="change" :circular="true" :vertical="true" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="(item, index) in value.list" :key="index" @touchmove.stop>
							<view class="flex justify-center" style="height: 70rpx;" @click="redirectTo(item.link)">
								<text class="text-sm color-gray-8 lines-1" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx' }">{{item.title}}</text>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	// 公告
	export default {
		name: 'diy-notice',
		props: {
			value: {
				type: Object
			},
			siteId: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				index: 0
			};
		},
		created() {},
		methods: {
			redirectTo() {
				if (this.value && this.value.list && this.value.list[this.index].link) {
					let link = this.value.list[this.index].link;
					if (this.siteId) {
						link.site_id = this.siteId;
					}
					this.$util.diyRedirectTo(link);
				}
			},
			change(e) {
				this.index = e.detail.current;
			}
		}
	};
</script>

<style lang="scss">
	
</style>
